<template>
	<view>
		<!-- 普通弹窗 -->
		<uni-popup ref="popup" type="center" :mask-click="false">
			<view class="flex flex-col item-center justify-center">
				<view class="inner-box flex flex-col item-center justify-center">
					<image src="@/static/image/invite/bg-top.png" mode="widthFix" class="bg-top"></image>
					<!-- <image src="@/static/image/invite/bg-bottom.png" mode="widthFix" class="bg-bottom"></image> -->
					<image src="@/static/image/invite/bg-block.png" mode="widthFix" class="bg-block"></image>
					<image src="@/static/image/invite/bg-text.png" mode="widthFix" class="bg-text"></image>
					<!-- <view class="suc-text">商家邀请</view> -->
					<view class="invite-name">
						<view class="flex item-center">
							<image :src="merInfo.logo" mode="" class="icon-business"></image>
							<view class="bus-name">{{merInfo.businessName}}</view>
						</view>
						<view class="inve-text">商家邀请</view>
					</view>
					<!-- <view class="cot-text">邀请你成为TA的商户</view> -->
					
				</view>
				<view class="flex item-center btn-box justify-between">
					<view class="login-btn reject-btn" @click="showPop(false)">拒绝</view>
					<view class="login-btn" @click="joinNewMer(false)">接收邀请</view>
				</view>
				<view class="flex item-center justify-between">
					<image src="../../../static/svg/icon-close.svg" mode="widthFix" class="icon-close" @click="showPop(false,false)"></image>
				</view>
			</view>

		</uni-popup>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	import {
		repeatApply,
		getByInviteCode
	} from '@/api/businessEnterApply.js'
	const popup = ref()
	import {
		useUserStore
	} from '@/stores/modules/user.js'
	const userStore = useUserStore()
	let merInfo = ref({})
	const showPop = async (value) => {
		if (value) {
			let result = await getByInviteCode({settleCode: userStore.$state.investCode})
			// console.log(result,'result')
			if(result){
				merInfo.value = result
			}
			popup.value && popup.value.open('center')
		} else {
			userStore.setInestCode(null)
			popup.value && popup.value.close()
		}
	}
	const joinNewMer = async () => {
		uni.showLoading()
		let result = await repeatApply({
			settleCode: userStore.$state.investCode
		})
		if (result) {
			uni.showToast({
				icon: 'none',
				title: '入驻成功'
			})
			showPop(false)
		}
		uni.hideLoading()
	}
	defineExpose({
		showPop
	})
</script>

<style scoped lang="scss">
	.icon-business {
		width: 60rpx;
		height: 60rpx;
		border-radius: 12rpx;
	}
	.bus-name{
		margin-left: 18rpx;
		font-size: 30rpx;
		color: #ffffff;
	}
	.inner-box {
		width: 640rpx;
		height: 450rpx;
		border-radius: 24rpx;
		// background: linear-gradient(180.12deg, #FA4543 -11.78%, #FFCFCE -11.77%, #FFFFFF 99.9%);
		background: linear-gradient(180deg, #FF7575 10%, #FFF6E0 95.99%);

		// margin-top: -60px;
		position: relative;
	}
	.bg-top{
		width: 640rpx;
		position: absolute;
		z-index: 1;
		top: 0rpx;
	}
	.bg-bottom{
		width: 640rpx;
		margin-top: -130rpx;
	}
	.bg-block{
		width: 580rpx;
		position: absolute;
		top: -140rpx;
		z-index:2;
	}
	.bg-text{
		width: 320rpx;
		margin-top: 200rpx;
	}
	.cot-text {
		font-size: 14px;
		font-weight: 400;
		line-height: 28px;
		text-align: center;
		color: rgba(51, 51, 51, 1);
		margin-top: 20px;
	}

	.suc-text {
		font-family: PingFang SC;
		font-size: 20px;
		font-weight: 600;
		line-height: 34px;
		letter-spacing: 0px;
		text-align: center;
		color: rgba(51, 51, 51, 1);
		margin-top: 20px;
	}

	.btn-box {
		width: 100%;
		box-sizing: border-box;
		padding: 0 20px 10px 20px;
	}

	.login-btn {
		width: 45%;
		height: 46px;
		line-height: 46px;
		font-size: 14px;
		border-radius: 12px;
		background: rgba(250, 69, 67, 1);
		color: #ffffff;
		margin-top: 20px;
		text-align: center;
	}

	.reject-btn {
		color: #000000;
		background-color: #ffffff;
		border: 1px solid #ffffff;
	}
	.invite-name{
		position: absolute;
		top: 0rpx;
		z-index: 4;
		left: 60rpx;
	}
	.inve-text{
		font-family: PingFang SC;
		font-size: 64rpx;
		font-weight: 600;
		line-height: 38px;
		color: rgba(255, 255, 255, 1);
		margin-top: 40rpx;
	}
	.icon-close{
		width: 64rpx;
		margin-top: 60rpx;
	}
</style>